<template>
  <div class="header">
  <header>
<!--头部-->
    <!--  头部导航栏-->
    <div class="container">
      <div class="nav-left">
        <div class="logo">
          <router-link to="/home" href="#"></router-link>
        </div>
        <div class="city">
          <p>
            <i></i>
            <span class="seclet">广州</span>
            <span class="switch">[切换城市]</span>
          </p>

        </div>
        <div class="nav-list">
          <ul>
            <li :class="$route.path==='/home' ? 'current' : ''"><router-link to="/home">首页</router-link></li>
            <li :class="$route.path==='/helpItems' ? 'current' : ''"><router-link to="/helpItems">求助列表</router-link></li>
            <li :class="$route.path==='/addOrder' ? 'current' : ''"><router-link to="/addOrder" href="#">我要求助</router-link></li>
            <li :class="$route.path==='/secondHandMarket' ? 'current' : ''"><router-link to="/secondHandMarket" class="New">二手市场</router-link></li>
<!--            <li class=""><a href="#">二手市场</a></li>-->
<!--            <li class=""><a href="#">资讯</a></li>-->
<!--            <li class=""><a href="#" class="hot">百科</a>-->
<!--            </li>-->
          </ul>
        </div>
      </div>
      <div class="nav-right">
        <router-link to="/chat" :class="[noRead? 'New':'']" :style="$route.path==='/chat' ? 'color: #52FFFF' : ''">消息</router-link>
        <router-link to="/myOrder" :style="$route.path.split('/')[1]==='/myOrder' ? 'color: #52FFFF' : ''">我的订单</router-link>
        <div v-if="!token" class="not-login">
        <router-link to="/login" class="login a-border" :style="$route.path==='/login' ? 'color: #52FFFF' : ''">登录</router-link>
        <router-link to="/register" class="sign a-border" :style="$route.path==='/register' ? 'color: #52FFFF' : ''">注册</router-link>
        </div>
        <HeaderLogin v-if="token"></HeaderLogin>

      </div>

    </div>
  </header>

  <!-- 搜索栏 -->
  <div class="search" v-show="$route.meta.search">
    <div class="container">
      <div class="search_box  ">
        <div class="search_top">

          <div class="job_box">
            <div class="job_type">
              <span id="job_type">订单类型</span>
              <i></i>
            </div>
            <div class='job_search'>
              <input v-model="title" type="text" placeholder="搜索订单">
            </div>
          </div>
          <div @click="search" to="/helpItems" class="search_btn">
            搜索
          </div>
        </div>
        <div class="search_bottom">
          <span>热门求助:</span>
          <a href="#" @click="searchBy('快递')" class="current">快递</a>
          <a href="#" @click="searchBy('陪护')" class="current">陪护</a>
          <a href="#" @click="searchBy('论文')" class="current">论文</a>
          <a href="#" @click="searchBy('笔记')" class="current">笔记</a>
          <a href="#" @click="searchBy('咨询')" class="current">咨询</a>
          <a href="#" @click="searchBy('兼职')" class="current">兼职</a>
          <a href="#" @click="searchBy('陪跑')" class="current">陪跑</a>
          <a href="#" @click="searchBy('文具')" class="current">文具</a>
          <a href="#" @click="searchBy('作业解答')" class="current">作业解答</a>
        </div>

        <div class="hide_job">
          <div class="hide_left">
            <ul>
              <li class="selected">不限</li>
            </ul>
          </div>
          <div class="hide_middle">
            <ul></ul>
          </div>
          <div class="hide_right">
            <ul></ul>
          </div>

        </div>
    </div>

  </div>
  </div>
  </div>
</template>

<script>
import HeaderLogin from "@/components/header/HeaderLogin.vue";
import {mapState} from "vuex";
export default {
  name: "HerderIndex",
  components: {HeaderLogin},
  data(){
    return{
      title:'',
    }
  },
  computed: {
    //判断token
    token() {
      return this.$store.state.user.token;
    },
    ...mapState({
      noRead: state => state.chat.noRead,
    })
  },
  methods:{
    searchBy(title){
      this.$router.push({name:'helpItems',query:{title:title}})
    },
    search(){
      this.$router.push({name:'helpItems',query:{title:this.title}})
      this.title = ''
    }
  }

}
</script>

<style scoped>
body {
  background: #f5f7f9;
  min-width: 1184px;
  line-height: 26px;
  color: #111;
  font-size: 14px;
}
header {
  width: 100%;
  height: 49px;
  text-align: center;
  line-height: 49px;
  background-color: #FFCCCC;
  user-select: none;
}

.container {
  width: 1184px;
  margin: 0 auto;
}

header>.container a {
  color: white;
  display: block;
  height: 34px;
  position: relative;
}

header>.container a:hover {
  color: #52FFFF;
  transition: all linear .2s;
}

header>.container a::after {
  width: 30px;
  height: 14px;
  box-sizing: border-box;
  position: absolute;
  top: 8px;
  right: -20px;
  line-height: 13px;
  background-color: #ef505e;
  color: #fff;
  font-size: 12px;
  border-radius: 7px;
}
header>.container {
  display: flex;
  justify-content: space-between;
}

.nav-left {
  width: 442px;
  display: flex;
  justify-content: space-between;
}

.logo {
  padding: 6px 0 0 0;
}

.logo>a {
  display: block;
  width: 110px;
  height: 36px;
  background: url(./images/logo.png)  7px 8px no-repeat;
  background-size: 105px 19px;
}

.nav-list {
  width: 209px;
}

.nav-list>ul {
  display: flex;
  margin-top: 0px;
  justify-content: space-evenly;
}

.nav-list .current>a {
  color: #52FFFF;
}

.nav-left span {
  color: white;
}

.city {
  cursor: pointer;
}
.city p{
  margin-top: 0px;
}
.city i {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 23px;
  background: url(./images/icon-poi.png) 0 -165px;
  margin: 17px 3px 0 12px;
}

.city .switch {
  font-size: 12px;
}

.seclet {
  color: #52FFFF !important;
}

.New::after {
  content: 'New';
}

.hot::after {
  content: 'hot';
}

.nav-right {
  display: flex;
  justify-content: space-evenly;
  /*align-items: center;*/
}

.nav-right>a {
  margin-right: 10px;
}
.nav-right .not-login {
  margin-right: 10px;
}

.nav-right>.a-border {
  height: 23px;
  font-size: 13px;
  line-height: 23px;
  border: 1px solid #52FFFF;
  padding: 0px 11px 0 11px;
  border-radius: 15px;
  margin-left: 6px;
  margin-top: 12px;
}

.nav-right .not-login>a{
  float: left;
  height: 23px;
  font-size: 13px;
  line-height: 23px;
  border: 1px solid #52FFFF;
  padding: 0px 11px 0 11px;
  border-radius: 15px;
  margin-left: 6px;
  margin-top: 12px;
}
/*头部*/

/* 搜索栏 */

.search_box {
  width: 934px;
  margin: 0 auto;
  padding-top: 20px;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
  position: relative;
}

.search_box .search_top {
  display: flex;
  justify-content: space-between;
  border: 1px solid #fff;
  align-items: center;
  background-color: #fff;
}

.search_top .job_box {
  flex: 1;
  display: flex;
  align-items: center;
  box-shadow: 0 0 6px 0 rgb(0 0 0 / 13%);
  height: 50px;
  box-sizing: border-box;
  border: 1px solid #fff;
}

.search_top .job_box:hover {
  border: 1px solid #54cbc4;
  border-right: none;
}

.search_top .job_box .job_type {
  position: relative;
  width: 99px;
  padding: 9px 15px 11px;
}

.search_top .job_box .job_type span {
  font-size: 16px;
  margin-left: -35px;
  display: inline-block;
  width: 80px;
  white-space: nowrap;
  color: #61687c;
  user-select: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search_top .job_box .job_type i {
  position: absolute;
  top: 11px;
  right: 10px;
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url(./images/icons.png);
  background-repeat: no-repeat;
  background-position: 0 -2044px;
}

.search_top .job_box .job_search {
  flex: 1;
}

.search_top .job_box .job_search input {
  width: 100%;
  font-size: 16px;
  padding: 0 0 0 20px;
  outline: none;
  border: none;
  box-sizing: border-box;
}

.search_top .search_btn {
  height: 50px;
  line-height: 50px;
  background-image: none;
  font-size: 16px;
  width: 140px;
  background-color: #5dd5c8;
  user-select: none;
  cursor: pointer;
  color: #fff;
}

.search_top .search_btn:hover {
  background-color: #6adbcf;
}

.hide_job {
  width: 506px;
  height: 250px;
  justify-content: space-evenly;
  position: absolute;
  top: 71px;
  left: 0;
  display: none;
  z-index: 100;
}

.hide_job>div {
  flex: 1;
  overflow-y: scroll;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  background-color: #fff;
}

.hide_job>div ul li {
  height: 42px;
  padding: 0 15px;
  text-align: left;
  line-height: 42px;
  color: #8d92a1;
}

.hide_job .hide_right {
  visibility: hidden;
}

.selected {
  background-color: #f2f5f9;
  -webkit-transition: all linear .2s;
  transition: all linear .2s;
}

.search_bottom {
  text-align: left;
  color: #9fa3b0;
  width: 980px;
  margin: 10px auto 30px;
  font-size: 13px;
}

.search_bottom>a {
  margin-left: 20px;
  color: #00c2b3;
}

/* 搜索栏 */

</style>
